<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function $(id) {
            return document.getElementById(id);
        }

        /**
         *复用检查
         */
        function testing(regular, id, spanId, explain) {
            var rex = regular;
            if (rex.test($(id).value)) {
                $(spanId).innerHTML = "验证通过";
                $(spanId).style.color = "green";
                return true;
            } else {
                $(spanId).innerHTML = explain;
                $(spanId).style.color = "red";
                return false;
            }
        }

        /**
         * 用户名
         */
        function checkName() {

            testing(/^[a-zA-Z]{2,20}$/, "userName", "nameSpan", "用户名必须是2-20位字母");

        }

        /**
         * 电话验证
         * @returns {boolean}
         */
        function checkPhone() {

            testing(/^1[3578]\d{9}$/, "phone", "phoneSpan", "电话必须是（13，15，17，18）开头的11位数");

        }

        /**
         *密码验证
         */
        function checkPwd() {

            testing(/^\d{6}$/, "password", "pwdSpan", "密码必须是6位数字");

        }

        /**
         * 邮箱验证
         */
        function checkEml() {
            testing(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, "eml", "emlSpan", "请输入正确的邮箱号码");

        }

        /**
         * 生日验证
         */
        function checkBirthday() {
            testing(/^\d{4}-\d{1,2}-\d{1,2}/, "birthday", "birthdaySpan", "请输入正确的XXXX-XX-XX生日格式");
        }


        function submitForm() {
            alert(checkName() );
            // if (checkName() & checkPwd() & checkPhone() & checkEml() &checkBirthday()) {
            //     $("f1").submit();
            // }
        }


    </script>
</head>
<body>
<form action="add" id="f1">

    <p>用户名：</p>
    <input type="text" name="userName" id="userName" onblur=checkName()>
    <span id="nameSpan"></span><br>
    <p>密码：</p>
    <input type="password" name="pwd" id="password" onblur=checkPwd()>
    <span id="pwdSpan"></span><br>
    <p>电话：</p>
    <input type="text" name="phone" id="phone" onblur=checkPhone()>
    <span id="phoneSpan"></span><br>
    <p>邮箱：</p>
    <input type="email" name="eml" id="eml" onblur=checkEml()>
    <span id="emlSpan"></span><br>
    <p>生日：</p>
    <input type="text" name="birthday" id="birthday" onblur=checkBirthday()>
    <span id="birthdaySpan"></span><br>
    <p></p>
    <input type="button" value="提交" onclick="submitForm()">

</form>

</body>
</html>